<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="我的发票">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <div v-if="flag">
            <el-form>
                <el-container>
                    <el-form-item>
                        <el-input v-model="cwInvoice.inputValueType" clearable></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.cw_inout_title_case_No" clearable
                                   placeholder="选择查找方式">
                            <el-option
                                    :label="caseNo.case_no"
                                    :value="caseNo.case_no">
                            </el-option>
                            <el-option
                                    :label="caseNo.cw_inout_title"
                                    :value="caseNo.cw_inout_title">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.cwInvoiceStatu" clearable placeholder="开票状态">
                            <el-option
                                    v-for="item in cwInvoiceStatus"
                                    :key="item.status_code"
                                    :label="item.status_value"
                                    :value="item.status_code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.BillType" clearable placeholder="发票类型">
                            <el-option
                                    v-for="item in cwInvoiceType"
                                    :key="item.TypeId"
                                    :label="item.Typevalue"
                                    :value="item.TypeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.cwInvoiceItem" clearable placeholder="开票项目">
                            <el-option
                                    v-for="item in cwInvoiceItemOption"
                                    :key="item.ItemID"
                                    :label="item.Itemvalue"
                                    :value="item.ItemID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-cascader placeholder="请选择案件类型" clearable
                                     v-model="cwInvoice.caseTypeid"
                                     :options="CaseType"
                                     :props="{ expandTrigger: 'hover' ,checkStrictly:true }"
                                     @change="handleChange1">
                        </el-cascader>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item>
                        <el-date-picker
                                v-model="cwInvoice.cw_application_date"
                                type="date"
                                placeholder="申请日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker
                                v-model="cwInvoice.cw_invoice_date"
                                type="date"
                                placeholder="开票日期" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="List()" icon="el-icon-search" >检索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>

            <el-table
                    :data="cwInvoices.records"
                    border
                    style="width: 100%;font-size: 18px;">
                <el-table-column
                        prop="id"
                        label="" v-if="false">
                </el-table-column>
                <el-table-column
                        prop="empId"
                        label="" v-if="false">
                </el-table-column>
                <el-table-column
                        prop="caseNo"
                        label="案号">
                </el-table-column>
                <el-table-column
                        prop="cwInvoiceTitle"
                        label="发票抬头">
                </el-table-column>
                <el-table-column
                        prop="cwInvoiceMoney"
                        label="发票金额(元)">
                </el-table-column>
                <el-table-column
                        prop="cwApplicationDate"
                        label="申请日期">
                </el-table-column>
                <el-table-column
                        prop="cwInvoiceDate"
                        label="开票日期">
                </el-table-column>

                <el-table-column
                        prop="cwInvoiceStatus"
                        label="开票状态">
                    <template slot-scope="scope">
                        {{cwInvoiceStatus[scope.row.cwInvoiceStatus=='Y'?0:1].status_value}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="Select(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="case-exam-footer">
                <el-pagination
                        class="pagination"
                        :page-size="cwInvoices.size"
                        @current-change="handleIndexChange" :current-page="cwInvoices.current"
                        :page-count="cwInvoices.pages" layout="prev, pager, next"
                        :total="cwInvoices.total">
                </el-pagination>
            </div>
        </div>
        <div v-if="!flag">
            <div class="header" style="background-color: white">
                <el-page-header @back="comeback" content="详细信息">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <div class="message">
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>客户名称:</span><br />{{InvoicesByid.emp_name}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>案号:</span><br />{{InvoicesByid.case_no}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>实收金额:</span><br />{{InvoicesByid.case_paidsal}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票抬头:</span><br />{{InvoicesByid.cw_invoice_title}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票金额:</span><br />{{InvoicesByid.cw_invoice_money}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票项目:</span><br />{{InvoicesByid.cw_invoice_item}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开具类型:</span><br />{{InvoicesByid.cw_open_type}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票类型:</span><br />{{InvoicesByid.cw_invoice_type}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>纳税人识别号:</span><br />{{InvoicesByid.cw_taxpayer_identity_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>税务登记证副本复印件:</span><br />{{InvoicesByid.file_name}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>基本户开户银行:</span><br />{{InvoicesByid.cw_basic_bankofdeposit}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>基本户开户账号:</span><br />{{InvoicesByid.cw_account_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>注册场所地址:</span><br />{{InvoicesByid.cw_registered_address}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>注册固定电话:</span><br />{{InvoicesByid.cw_fixedline_telephone}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>收件人:</span><br />{{InvoicesByid.system_user_recipients}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>收件地址:</span><br />{{InvoicesByid.emp_site}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>联系电话:</span><br />{{InvoicesByid.emp_contact_phone}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>申请日期:</span><br />{{InvoicesByid.cw_application_date}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>申请备注:</span><br />{{InvoicesByid.cw_application_remark}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票状态:</span><br />{{InvoicesByid.cw_invoice_status}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票号:</span><br />{{InvoicesByid.cw_invoice_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票备注:</span><br />{{InvoicesByid.cw_invoice_remark}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {CwInvoiceService} from "../../../model/ww/cw_invoice/CwInvoiceService";

    const cwInvoiceService = CwInvoiceService.getInstance();
    export default {

        name: "MyBill"
        ,
        data() {
            return {
                caseNo:
                    {
                        cw_inout_title: "发票抬头",
                        case_no: "案号"
                    },
                cwInvoiceStatus: [{
                    status_code: 'Y',
                    status_value: '已开'
                },
                    {
                        status_code: 'N',
                        status_value: '未开'
                    }
                ],
                cwInvoiceType: [{
                    TypeId: 1,
                    Typevalue: '增值税专用发票'
                },
                    {
                        TypeId: 2,
                        Typevalue: '增值税普通发票'
                    },
                    {
                        TypeId: 3,
                        Typevalue: '通用机打发票'
                    }
                ],
                cwInvoiceItemOption: [{
                    ItemID: 1,
                    Itemvalue: '律师代理费'
                },
                    {
                        ItemID: 2,
                        Itemvalue: '法律顾问费'
                    },
                    {
                        ItemID: 3,
                        Itemvalue: '咨询费'
                    },
                    {
                        ItemID: 4,
                        Itemvalue: '法务托管费'
                    },
                    {
                        ItemID: 5,
                        Itemvalue: '非诉'
                    },
                    {
                        ItemID: 6,
                        Itemvalue: '其他(备注中填写)'
                    }

                ],
                cwInvoice: {},//发票对象
                CaseType: [],//案件类型
                cwInvoices: [],//发票表格数据
                flag:true,    //查看
                InvoicesByid:{}//我的发票
            }
        },
        methods: {
            List() { //我的发票数据
                cwInvoiceService.list(this.cwInvoice).then((response) => {
                    this.cwInvoices = response.data.data
                })
            },
            //案件改变事件
            handleChange1(ids2){//案件类型下拉框改变事件
                if(ids2.length==2){
                    this.cwInvoice.caseTypeid=ids2[ids2.length-1]
                }
                if(ids2.length==1){
                    this.cwInvoice.caseTypeid=ids2[ids2.length-1]
                }
            },
            selects2() { //查询案件类型
                cwInvoiceService.caseTypeList().then((response) => {
                    this.CaseType = response.data.data
                })
            },
            Select(row){ //查看并拿到这一行数据的id
                cwInvoiceService.cwinvoicegetById(row.empId).then((response)=>{
                    this.InvoicesByid=response.data.data
                })
                if(this.InvoicesByid!=null){
                    this.flag=!this.flag;
                }else{
                    this.$message('存在脏数据,该用户没有发票');
                    return;
                }
            },
            comeback(){//返回
                this.flag=!this.flag;
            },
            handleIndexChange(index){//分页
                this.cwInvoice.page=index;
                this.List();
            },
            goBack(){
                history.back()
            }
        },
        created() {
            this.selects2()
            this.List(this.cwInvoice)
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .bg-purple {
        background: #FFFFFF;
        border: 1px solid  darkgray;
        width: 23.5%;
        height: 50px;
    }
</style>
